<template>
    <div v-if="monitorData && monitorData.length > 0" class="monitor-data">
      <!-- 遍历每组监测数据 -->
      <div v-for="(item, index) in monitorData" :key="index" class="monitor-item">
        <div class="monitor-header">
          <div class="left">
            <span class="device-name">{{ item.deviceName }}</span>
            <span class="time">{{ new Date(item.createTime).toLocaleString() }}</span>
          </div>
          <div class="separator"></div>
          <div class="right">
            <div class="value">
              <span class="label">空气温度</span>
              <span class="data">{{ item.airTemperature ? item.airTemperature.toFixed(1) : '-' }}°C</span>
            </div>
            <div class="value">
              <span class="label">空气湿度</span>
              <span class="data">{{ item.airHumidity ? item.airHumidity.toFixed(1) : '-' }}%</span>
            </div>
            <div class="value">
              <span class="label">光照强度</span>
              <span class="data">{{ item.lightIntensity ? item.lightIntensity.toFixed(1) : '-' }}Lux</span>
            </div>
            <div class="value">
              <span class="label">二氧化碳</span>
              <span class="data">{{ item.carbonDioxide ? item.carbonDioxide.toFixed(1) : '-' }}ppm</span>
            </div>
            <div class="value">
              <span class="label">土壤温度</span>
              <span class="data">{{ item.soilTemperature ? item.soilTemperature.toFixed(1) : '-' }}°C</span>
            </div>
            <div class="value">
              <span class="label">土壤水分</span>
              <span class="data">{{ item.soilMoisture ? item.soilMoisture.toFixed(1) : '-' }}%</span>
            </div>
            <div class="value">
              <span class="label">土壤EC值</span>
              <span class="data">{{ item.soilEcValue ? item.soilEcValue.toFixed(1) : '-' }}us/cm</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  
    <!-- 如果没有数据，则显示暂无数据提示 -->
    <div v-else class="no-data">
      <p>暂无数据</p>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch } from 'vue';
  import { reqMonitorRecentData } from "@/api/monitor"; 
  import useOperationStore from '@/store/operation';
  
  // 获取并监听 operationStore 的变化
  let operationStore = useOperationStore();
  let operationId = ref(operationStore.data.length > 0 ? operationStore.data[operationStore.index].id : '');
  
  // 当 operationStore 数据变化时，更新 operationId
  operationStore.$subscribe(async (mutation, state) => {
    operationId.value = operationStore.data[operationStore.index].id;
    await fetchMonitorData(); // 重新获取监测数据
  });
  
  // 用于存储监测数据
  const monitorData = ref([]);
  
  // 获取监测数据的函数
  const fetchMonitorData = async () => {
    if (!operationId.value) return; // 确保 operationId 存在
  
    const response = await reqMonitorRecentData(operationId.value);
    if (response.code === 0) {
      monitorData.value = response.data; // 将返回的数据存入变量
    } else {
      console.error('获取数据失败');
    }
  };
  
  // 在组件挂载时获取数据
  onMounted(() => {
    fetchMonitorData(); // 加载初始数据
  });
  </script>
  
  <style scoped>
  @use "@/styles/themes.scss";
  
  .monitor-data {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .monitor-item {
    display: flex;
    flex-direction: row; 
    padding: 16px;
    border-radius: 8px;
    background-color: #fff;
    color: var(--primary-color);
  }
  
  .monitor-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: bold;
  
    .time {
      color: #999;
      font-weight: 100;
    }
  }
  
  .separator {
    width: 1px;
    background-color: #e0e0e0;
    margin: 0 16px;
  }
  
  .right {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
  }
  
  .value {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
  }
  
  .label {
    font-size: 14px;
    color: #999;
    margin-bottom: 4px;
  }
  
  .data {
    font-size: 16px;
    font-weight: bold;
  }
  
  /* 当没有数据时，居中显示提示 */
  .no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 20px;
    color: #999;
  }
  </style>
  